<template>
    <div>
        <div class="account-title">
            <h2>金融账户</h2>
        </div>
        <div class="account-summary">
            <el-row>
                <div class="left">
                    <div class="one">
                        <div class="title">金额</div>
                        <div class="normal-money">20000.00</div>
                    </div>
                    <div class="two">
                        <div class="title">流入</div>
                        <div class="income-money">30000.00</div>
                    </div>
                    <div class="three">
                        <div class="title">流出</div>
                        <div class="pay-money">10000.00</div>
                    </div>
                </div>

                <div class="right">
                    <el-button type="warning" :icon="Plus">添加账户</el-button>
                </div>
            </el-row>
        </div>
        <div class="account-item">
            <el-card>
                <div class="header">
                    <div>支付宝</div>
                    <div>在线支付</div>
                    <div>人民币</div>
                </div>
                <el-divider />
                    <el-row>
                        <div class="operate-left">
                            <div class="operate-btn">
                                <span><Delete />删除</span>
                                <span><Edit />编辑</span>
                            </div>
                        </div>

                        <div class="operate-right">
                            <div>
                                <div class="money-top">
                                    <div class="money-top-right">
                                        <span class="small money-type">CNY</span>
                                        <span class="money-normal">10.00</span>
                                    </div>
                                </div>
                                <div>
                                    <el-row>
                                        <div>
                                            <span class="small">流入</span>
                                            <span class="money-red">10.00</span>
                                        </div>
                                        <div class="out-money">
                                            <span class="small">流出</span>
                                            <span class="money-green">20.00</span>
                                        </div>
                                    </el-row>
                                </div>
                            </div>

                        </div>
                    </el-row>

            </el-card>
        </div>

        <div class="account-item">
            <el-card>
                <div class="header">
                    <div>微信</div>
                    <div>在线支付</div>
                    <div>人民币</div>
                </div>
                <el-divider />
                    <el-row>
                        <div class="operate-left">
                            <div class="operate-btn">
                                <span><Delete />删除</span>
                                <span><Edit />编辑</span>
                            </div>
                        </div>

                        <div class="operate-right">
                            <div>
                                <div class="money-top">
                                    <div class="money-top-right">
                                        <span class="small money-type">CNY</span>
                                        <span class="money-normal">2000.00</span>
                                    </div>
                                </div>
                                <div>
                                    <el-row>
                                        <div>
                                            <span class="small">流入</span>
                                            <span class="money-red">0.00</span>
                                        </div>
                                        <div class="out-money">
                                            <span class="small">流出</span>
                                            <span class="money-green">0.00</span>
                                        </div>
                                    </el-row>
                                </div>
                            </div>

                        </div>
                    </el-row>

            </el-card>
        </div>
    </div>
</template>


<script lang="ts" setup>
import { Plus, Delete, Edit } from '@element-plus/icons-vue';
</script>

<style lang="scss" scoped>
.account-item {
    margin-top: 30px;

    &>.is-always-shadow {
        box-shadow: none;
    }

    & .header {
        &>div {
            display: inline-block;

            &:first-child {
                font-size: 18px;
                font-weight: bold;
                margin-right: 32px;
            }

            &:nth-child(2) {
                font-size: 12px;
                color: #aaa;
                margin-right: 15px;
            }

            &:nth-child(3) {
                font-size: 12px;
                color: #aaa;
            }
        }
    }
}

.account-title {
    & h2 {
        font-size: 18px;
    }
}

.normal-money {
    font-size: 26px;
}

.income-money {
    font-size: 26px;
    color: #f1523a;
}

.pay-money {
    font-size: 26px;
    color: #14ba89;
}

.account-summary .el-row {
    align-content: center;
    & .left {
        flex: 1;
        &>div {
            display: inline-block;

            &.one {
                padding-right: 30px;
                border-right: 1px solid #dcdfe6;
            }

            &.two {
                padding: 0 30px;
            }

            &.three {
                padding-left: 30px;
                border-left: 1px solid #dcdfe6;
            }

            & .title {
                font-size: 12px;
                color: #aaa;
            }
        }

    }

    & .right {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        & .el-button {
            padding-left: 30px;
            padding-right: 30px;
            font-size: 16px;
        }
    }
}

.operate-left {
    display: flex;
    align-items: center;

    & .operate-btn {
        &>span {
            font-size: 12px;

            &>svg {
                width: 16px;
                height: 16px;
                position: relative;
                top: 3px;
                margin-right: 4px;
            }

            &:first-child {
                margin-right: 28px;
            }
        }
    }
}

.operate-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;

    & .money-type {
        margin: 12px 6px 0 0;
    }

    & .small {
        font-size: 12px;
        color: #aaa;
    }

    & .money-normal {
        font-size: 28px;
        color: #312f2c;
    }

    & .money-red {
        text-indent: 6px;
        display: inline-block;
        color: red;
        font-size: 12px;
    }

    & .money-green {
        color: #14ba89;
        font-size: 12px;
        text-indent: 6px;
        display: inline-block;
    }

    & .out-money {
        margin-left: 15px;
    }

    & .money-top {
        overflow: hidden;

        & .money-top-right {
            float: right;
        }
    }


}
</style>